<template>
  <!-- 评论切换 -->
  <div class="plqh">
    <!-- 评论 -->
    <span class="contentNum fontHt">评论<span class="contentTitle">{{contentAllNum}}</span></span>
    <span class=" contentController p-c" :class="{active:true}">最新</span>
    <span class="contentController mar-l-r-10"> | </span>
    <span class=" contentController p-c" >最热</span>
  </div>
<!--  <div class="plk">-->
<!--    <div class="user-tx">-->
<!--      <img src="http://localhost/img2/BIL/4.jpeg">-->
<!--    </div>-->
<!--    <div class="plsrk">-->
<!--      <div class="loginSpanBox">-->
<!--        <textarea ref="textareaF" @click="showEom" v-model="list.contentUp.content" rows="2" cols="" class="commentInput fontHt" :class="[{commentInputActive:textFocus},{textInputActive:isToken}]" placeholder="向大家展示你的想法吧！">-->
<!--      </textarea>-->
<!--        <div class="loginSpan" v-if="isToken"><span class="fontHt">请登录后再评论！</span></div>-->
<!--      </div>-->
<!--      <div class="faceListBox" ref="eomBox" @click="showEom" :class="{textInputActive:isToken}">-->
<!--        <svg viewBox="0 0 24 24" ref="eomBoxIcon" @click="showEom"-->
<!--             width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"-->
<!--             stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">-->
<!--          <circle cx="12" cy="12" r="10"></circle>-->
<!--          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>-->
<!--          <line x1="9" y1="9" x2="9.01" y2="9"></line>-->
<!--          <line x1="15" y1="9" x2="15.01" y2="9"></line>-->
<!--        </svg>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="plfb">-->
<!--      <button type="button" class="commentUpButton skyblue fontHt">展示</button>-->
<!--    </div>-->
<!--  </div>-->
  <content-pl :num="contentAllNum" @getContent="getContentOne"></content-pl>
<!--  <div class="eom-box-all-waike show-box-m-d" :class="{None:IconIn}" ref="eomBoxOne" @click.stop>-->
<!--    <div class="eom-box-all">-->
<!--      <div class="eom-name">-->
<!--        <span class="fontHt" ref="eomTitle">emo表情</span>-->
<!--      </div>-->
<!--      <div class="eom-show">-->
<!--      <span class="eom-span fontHt eom-span-show" v-for="(eom,index) in eomOne" :key="index" @click="spanUp">-->
<!--        <span class="fontHt">{{eom.eomIcon}}</span>-->
<!--      </span>-->
<!--      </div>-->
<!--      <div class="eom-table">-->
<!--        <div class="eom-table-one" type="buttom" @click="clickEom(1)" :class="{backW:eomQH === 1}">-->
<!--          😋-->
<!--        </div>-->
<!--        <div class="eom-table-one" type="buttom" @click="clickEom(2)" :class="{backW:eomQH === 2}">-->
<!--          <span class="fontHt">:-)</span>-->
<!--        </div>-->
<!--        <div class="eom-table-bili-one" type="buttom" @click="clickEom(3)" :class="{backW:eomQH === 3}">-->
<!--          <img src="http://localhost/img/eom/3087d273a78ccaff4bb1e9972e2ba2a7583c9f11.png">-->
<!--        </div>-->
<!--        <div class="eom-table-bili-one" type="buttom" @click="clickEom(4)" :class="{backW:eomQH === 4}">-->
<!--          <img src="http://localhost/img/eom/5637557320fbfb3292307735f0b8acd53a791241.png">-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
  <!-- 评论区 -->
  <div class="content">
<!--    <content-pl :contentData="list.itemPl"></content-pl>-->
    <div class="contentOne" v-for="(item,index) in list.itemPl" :key="item.itemId">
      <div class="user-tx">
        <img :src="'http://mcgamehome.love'+item.parent.linkImg" :alt="'http://mcgamehome.love'+item.parent.linkImg">
      </div>
      <div class="user-pl-zt">
        <div class="user-pl-z">
          <div class="user-pl-name">
            <span>{{item.parent.linkName}}</span>
            <!-- <div class="user-pl-rd">HOT.1</div> -->
            <div class="gxbq" v-if="item.parent.tipNum !== 0">
              <img :src="'http://mcgamehome.love'+item.parent.tipImg" :alt="'http://mcgamehome.love'+item.parent.tipImg">
              <div class="bh fontHt"><p>NO.<br><span>{{item.parent.tipNum}}</span></p></div>
            </div>
          </div>
          <div class="comMsgBody">
            <span class="fontHt">{{item.parent.content}}</span>
          </div>
          <div class="comUpTime">
            <span class="fontHt contentTime">{{item.parent.time}}</span>
            <svg t="1636093575017" class="icon COMZSVG" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3323" width="200" height="200"><path d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z" p-id="3324" ></path></svg>
            <span class="comNum fontHt">{{ item.parent.likeNum }}</span>
<!--            <svg t="1636093677814" class="icon COMZSVG" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3933" width="200" height="200"><path d="M594.112 872.768a34.048 34.048 0 0 1-29.12-10.816c-11.264-13.248-15.872-24.064-21.504-40.064l-1.92-5.632c-5.632-16.128-12.8-36.864-27.712-63.232-25.344-44.928-50.24-74.432-86.144-97.024-23.104-14.528-43.648-26.432-65.024-32.64V203.84a4570.24 4570.24 0 0 1 339.072 4.672c38.656 2.048 72 21.12 88.896 52.032 21.504 39.36 47.232 95.744 63.552 163.008 16.448 67.52 21.568 123.776 22.592 163.008 0.448 16.832-13.44 32.256-35.392 32.256h-197.248a32 32 0 0 0-28.608 46.336l0.128 0.32 0.64 1.28 2.56 5.568c2.176 4.8 5.12 11.776 8.384 20.16 6.528 17.088 13.568 39.04 16.768 60.416 4.928 33.344 3.712 60.16-9.344 84.992-14.08 26.688-30.016 33.728-40.576 34.944z m97.728-190.016h149.568c52.8 0 100.864-40.128 99.392-97.92a846.336 846.336 0 0 0-24.32-176.448 742.016 742.016 0 0 0-69.632-178.56c-29.248-53.44-84.48-82.304-141.824-85.248-55.68-2.88-138.24-5.952-235.712-5.952-96 0-183.488 3.008-244.672 5.76-66.368 3.136-123.328 51.392-130.944 119.872a1380.608 1380.608 0 0 0-0.768 296.704c7.68 72.768 70.4 121.792 140.032 121.792h97.728c13.76 0 28.16 5.504 62.976 27.392 24.064 15.168 42.432 35.264 64.448 74.368 11.968 21.12 17.472 36.864 22.976 52.736l2.048 5.888c6.656 18.88 14.336 38.4 33.216 60.416 19.456 22.72 51.456 36.736 85.184 32.768 35.2-4.096 67.776-26.88 89.792-68.672 22.208-42.112 21.888-84.8 16-124.288a343.04 343.04 0 0 0-15.488-60.608zM298.688 205.568v413.184H232.96c-40.512 0-72.448-27.712-76.352-64.512a1318.912 1318.912 0 0 1 0.64-282.88c3.904-34.816 32.896-61.248 70.4-62.976 20.8-0.96 44.736-1.92 71.04-2.816z" p-id="3934" fill="#9499a0"></path></svg>-->
<!--            <span class="comNum fontHt"> </span>-->
            <span class="fontHt upCom" @click="backContent(item.itemId,item.parent.linkName,item.itemId)">回复</span>
            <div class="jb">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
              </svg>
            </div>
          </div>
        </div>
        <!-- 其他评论 -->
        <div class="moreContent" v-if="!item.length && item.length !== 0">
          <div class="contentOne" v-for="(item , index) in item.child" :key="item.id">
            <div class="user-img">
              <img :src="'http://mcgamehome.love'+item.linkImg" :alt="'http://mcgamehome.love'+item.linkImg">
            </div>
            <div class="user-content-body">
              <div class="contentBodyOne">
                <div class="user-pl-name">
                  <div class="childBox">
                    <div class="userName">{{item.linkName}}</div>
                    <span class="fontHt aite" v-if="item.boolChild !== 0" >@{{item.aiteName}}:</span><span class="fontHt contentBody">{{item.content}}</span>
                  </div>
                  <div class="gxbq" v-if="item.tipNum !== 0">
                    <img :src="'http://mcgamehome.love'+item.tipImg" :alt="'http://mcgamehome.love'+item.tipImg">
                    <div class="bh fontHt"><p>NO.<br><span>{{item.tipNum}}</span></p></div>
                  </div>
                </div>
<!--                <div class="contentWaike">-->
                  <div class="comUpTime">
                    <span class="fontHt contentTime">{{item.time}}</span>
                    <svg t="1636093575017" class="icon COMZSVG" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3323" width="200" height="200"><path d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z" p-id="3324"></path></svg>
                    <span class="comNum fontHt">{{ item.likeNum }}</span>
<!--                    <svg t="1636093677814" class="icon COMZSVG" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3933" width="200" height="200"><path d="M594.112 872.768a34.048 34.048 0 0 1-29.12-10.816c-11.264-13.248-15.872-24.064-21.504-40.064l-1.92-5.632c-5.632-16.128-12.8-36.864-27.712-63.232-25.344-44.928-50.24-74.432-86.144-97.024-23.104-14.528-43.648-26.432-65.024-32.64V203.84a4570.24 4570.24 0 0 1 339.072 4.672c38.656 2.048 72 21.12 88.896 52.032 21.504 39.36 47.232 95.744 63.552 163.008 16.448 67.52 21.568 123.776 22.592 163.008 0.448 16.832-13.44 32.256-35.392 32.256h-197.248a32 32 0 0 0-28.608 46.336l0.128 0.32 0.64 1.28 2.56 5.568c2.176 4.8 5.12 11.776 8.384 20.16 6.528 17.088 13.568 39.04 16.768 60.416 4.928 33.344 3.712 60.16-9.344 84.992-14.08 26.688-30.016 33.728-40.576 34.944z m97.728-190.016h149.568c52.8 0 100.864-40.128 99.392-97.92a846.336 846.336 0 0 0-24.32-176.448 742.016 742.016 0 0 0-69.632-178.56c-29.248-53.44-84.48-82.304-141.824-85.248-55.68-2.88-138.24-5.952-235.712-5.952-96 0-183.488 3.008-244.672 5.76-66.368 3.136-123.328 51.392-130.944 119.872a1380.608 1380.608 0 0 0-0.768 296.704c7.68 72.768 70.4 121.792 140.032 121.792h97.728c13.76 0 28.16 5.504 62.976 27.392 24.064 15.168 42.432 35.264 64.448 74.368 11.968 21.12 17.472 36.864 22.976 52.736l2.048 5.888c6.656 18.88 14.336 38.4 33.216 60.416 19.456 22.72 51.456 36.736 85.184 32.768 35.2-4.096 67.776-26.88 89.792-68.672 22.208-42.112 21.888-84.8 16-124.288a343.04 343.04 0 0 0-15.488-60.608zM298.688 205.568v413.184H232.96c-40.512 0-72.448-27.712-76.352-64.512a1318.912 1318.912 0 0 1 0.64-282.88c3.904-34.816 32.896-61.248 70.4-62.976 20.8-0.96 44.736-1.92 71.04-2.816z" p-id="3934" fill="#9499a0"></path></svg>-->
<!--                    <span class="comNum fontHt"> </span>-->
                    <span class="fontHt upCom" @click="backContent(item.rootId,item.linkName,item.id)">回复</span>
                    <div class="jb">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                      </svg>
                    </div>
                  </div>
<!--                </div>-->
              </div>
            </div>
          </div>
          <content2-pl @getContentOne="getContentOnes" :isShow="isShow" :numIndex="item.itemId" :hfIndex="hfIndex" :nowIndex ="isShowNum" :parents="numIndex"></content2-pl>

          <!--          <content2-pl :isShow="isShow" :numIndex="numIndex" :nowIndex ="isShowNum"></content2-pl>-->
        </div>
        <span class="fontHt moreHF" v-if="item.allNum > 3">共{{item.allNum}}条回复，<span class="moreHF2">查看</span></span>
      </div>
<!--      <span>{{list.itemPl[0].child.id}}cs</span>-->
    </div>
  </div>
  <div class="fontHt PlEnd" v-if="contentAllNum === 0 || contentAllNum === contentAllNumNew">评论已全部加载完毕</div>

</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import API from '@/api/AxiosConfig'
import {useRoute} from "vue-router";
import {useCookies} from "@vueuse/integrations/useCookies";
import {useStore} from "vuex";
import ContentPl from "@/components/ContentPl";
import Content2Pl from "@/components/Content2Pl";

const store = useStore()
const list = reactive({
  items: [],
  itemPl: [],
  itemNum: [],
})
let videoId = useRoute().query.look
const textareaF = ref(null)  //评论框
const textFocus = ref(false)  //评论框状态
const isShow = ref(null)
const isShowNum = ref(null)
const numIndex = ref(null)
const hfIndex = ref(false)
const blurIndexEnd = ref(null)
const IconIn = ref(true)
const content = ref('')
const eomOne = ref(null)  //eom表情显示列表
const eomQH = ref(1)   //eom列表切换
const contentAllNum = ref(0) //评论总数
const contentAllNumNew = ref(0)  //当前评论加载数量
let newReaderData = []
const dataAll = ref([])
const isToken = ref(null)
const cookie = useCookies()

// const eomList = [{id:1,eomIcon:'🙃'},{id:2,eomIcon:'😁'},{id:3,eomIcon:'😂'},{id:4,eomIcon:'🤣'},{id:5,eomIcon:'😃'},{id:6,eomIcon:'😄'},
//   {id:7,eomIcon:'😅'},{id:8,eomIcon:'😆'},{id:9,eomIcon:'😉'},{id:10,eomIcon:'😊'},{id:11,eomIcon:'😋'},{id:6,eomIcon:'😎'},
//   {id:13,eomIcon:'😍'},{id:14,eomIcon:'😘'},{id:15,eomIcon:'🥰'},{id:16,eomIcon:'🐸'},{id:17,eomIcon:'🤗'},{id:18,eomIcon:'🤩'},
//   {id:19,eomIcon:'🤔'},{id:20,eomIcon:'🤨'},{id:21,eomIcon:'🙄'},{id:22,eomIcon:'😏'},{id:23,eomIcon:'😣'},{id:24,eomIcon:'😥'},
//   {id:25,eomIcon:'😮'},{id:26,eomIcon:'🤐'},{id:27,eomIcon:'🧠'},{id:28,eomIcon:'😪'},{id:29,eomIcon:'😫'},{id:30,eomIcon:'😴'},
//   {id:31,eomIcon:'😜'},{id:32,eomIcon:'😓'},{id:33,eomIcon:'🤤'},{id:34,eomIcon:'😢'},{id:35,eomIcon:'🥶'},{id:36,eomIcon:'😭'},
//   {id:37,eomIcon:'🐔'},{id:38,eomIcon:'😰'},{id:39,eomIcon:'👀'},{id:40,eomIcon:'🥵'},{id:41,eomIcon:'🤡'},{id:42,eomIcon:'🐮'},
//   {id:43,eomIcon:'🤢'},{id:44,eomIcon:'🤮'},{id:45,eomIcon:'😨'},{id:46,eomIcon:'😬'},{id:47,eomIcon:'😡'},{id:48,eomIcon:'😇'}]
// const eomY = ref([{id:1,eomIcon:'ヾ(•ω•`)o'},{id:2,eomIcon:'\(￣︶￣*\))'},{id:3,eomIcon:'( ´･･)ﾉ(._.`)'},{id:4,eomIcon:'(｡･∀･)ﾉﾞ嗨'},{id:5,eomIcon:'\(@^0^@)/'},{id:6,eomIcon:'☆⌒(*＾-゜)v THX!!'},
//   {id:7,eomIcon:'✪ ω ✪'},{id:8,eomIcon:'(╯▽╰ )好香~~'},{id:9,eomIcon:'谢啦!!☆⌒(*＾-゜)v'},{id:10,eomIcon:'◑﹏◐'},{id:11,eomIcon:'(ಥ _ ಥ)'},{id:6,eomIcon:'(⓿_⓿)'},
//   {id:13,eomIcon:'(ง •_•)ง'},{id:14,eomIcon:'(✿◕‿◕✿)'},{id:15,eomIcon:'(/ω＼*)……… (/ω•＼*)'},{id:16,eomIcon:'(o′┏▽┓｀o) '},{id:17,eomIcon:'ԅ(¯﹃¯ԅ)'},{id:18,eomIcon:'（；´д｀）ゞ'},
//   {id:19,eomIcon:'(っ °Д °;)っ'},{id:20,eomIcon:'( *^-^)ρ(*╯^╰)'},{id:21,eomIcon:'(;´༎ຶД༎ຶ`)'},{id:22,eomIcon:'┭┮﹏┭┮'},{id:23,eomIcon:'(╬▔皿▔)╯'},{id:24,eomIcon:'(～￣(OO)￣)ブ'},
//   {id:25,eomIcon:'(～￣(OO)￣)ブ'},{id:26,eomIcon:'o((>ω< ))o'},{id:27,eomIcon:'(￣ε(#￣)'},{id:28,eomIcon:'┗|｀O′|┛'},{id:29,eomIcon:'(╯‵□′)╯︵┻━┻'},{id:30,eomIcon:'ಠಿ_ಠ'},
//   {id:31,eomIcon:'(＠_＠;)'},{id:32,eomIcon:'(๐॔˃̶ᗜ˂̶๐॓)'},{id:33,eomIcon:'┌( ´_ゝ` )┐'},{id:34,eomIcon:'(◎﹏◎)'},{id:35,eomIcon:'┏┛墓┗┓...(((m -__-)m'},{id:36,eomIcon:'∑( 口 ||'},
//   {id:37,eomIcon:'(°ー°〃)'},{id:38,eomIcon:':-)'},{id:39,eomIcon:'(＃°Д°)'}])

const props = defineProps({
  userId:String,
})
watch(()=>props,()=>{
  isToken.value = false
},{deep:true,immediate:true})

onMounted(() => {
  getNum()
  API({ url: '/api/videocs/'+videoId+'/'+0, method: 'get' }).then(res => {
    list.items = JSON.parse(JSON.stringify(res.data))
    contentStart()
    // console.log(document.getElementById("cs"))
    // console.log(textareaF.value)
    // console.log(list.itemPl)
    // console.log(list.itemPl[9].child)
  }).catch(err => {
    // console.log(err)
  })

  // list.contentUp.artId = videoId
})
function getContentOne(getContent) {
  ++contentAllNum.value
  ++contentAllNumNew.value
  // console.log(list.items)
  list.items.unshift(getContent)
  list.items = JSON.parse(JSON.stringify(list.items))

  // console.log(getContent)
  // console.log(list.items)
  contentStart()

}

function getContentOnes(getContentOne) {
  ++contentAllNum.value
  ++contentAllNumNew.value
  // console.log(list.items)
  list.items.push(getContentOne)
  list.items = JSON.parse(JSON.stringify(list.items))

  // console.log(getContent)
  // console.log(list.items)
  contentStart()

}

function backContent(i,name,i2){
  isShow.value = name
  isShowNum.value = i
  numIndex.value = i2
  hfIndex.value = !hfIndex.value
}

function contentStart() {
  let parentData = list.items.filter(item => item.parentId === 0)
  let childData = list.items.filter(item => item.parentId !== 0)
  //时间倒序
  // parentData.sort((a,b) => b.time - a.time )
  // childData.sort((a,b) => a.time - b.time )
  contentAllNumNew.value = parentData.length+childData.length
  newReaderData = []
  for (let i = 0;i< parentData.length;i++){
    newReaderData.push({
      itemId:parentData[i].id,
      parent:JSON.parse(JSON.stringify(parentData[i])),
      child:JSON.parse(JSON.stringify(list.items.filter(item => item.rootId === parentData[i].id))),
      allNum:list.itemNum[i]
      // child:JSON.parse(JSON.stringify(list.items.filter(item => item.parentId === parentData[i].id)))
    })
  }
  list.itemPl = JSON.parse(JSON.stringify(newReaderData))
}
// function clickEom(i){
//   if (i === 1){
//     eomOne.value = eomList
//     eomQH.value = i
//   }else if (i === 2){
//     eomOne.value = JSON.parse(JSON.stringify(eomY.value))
//     eomQH.value = i
//   }
// }
// function eomShow() {
//   eomBoxOne.value.style.left = ''+eomBox.value.style.offsetLeft+'px'
// }

// function spanUp(e) {
//   textareaF.value.focus()
//   blurIndex.value = textareaF.value.selectionStart
//   blurIndexEnd.value = textareaF.value.selectionEnd
//   if (list.contentUp.content === undefined || list.contentUp.content === ''){
//     list.contentUp.content = e.target.innerText
//     blurIndex.value = textareaF.value.selectionStart + e.target.innerText.length
//     blurIndexEnd.value = textareaF.value.selectionEnd + e.target.innerText.length
//
//   }else {
//     list.contentUp.content = list.contentUp.content.substring(0,blurIndex.value) + e.target.innerText + list.contentUp.content.substring(blurIndexEnd.value)
//     textareaF.value.focus()
//     textareaF.value.setSelectionRange(blurIndexEnd.value + e.target.innerText.length,blurIndexEnd.value + e.target.innerText.length)
//   }
//
// }

function getNum(){
  // console.log(i)
  API({ url: '/api/numcs/'+videoId+'/'+0, method: 'Get' }).then(res => {
    list.itemNum = res.data
  }).catch(err => {
    // console.log(err)
  })
    API({ url: '/api/PlNum/'+videoId, method: 'Get' }).then(res => {
    contentAllNum.value = res.data
  }).catch(err => {
    // console.log(err)
  })
}
// function showEom(e){
//   clickEom(eomQH.value)
//     document.addEventListener('click', (e) => {
//       if (eomBox.value===(e.target) || eomBoxIcon.value===(e.target)){
//         eomBoxOne.value.style = 'left:'+eomBox.value.offsetLeft+'px'
//         IconIn.value = false
//       }
//       if (textareaF.value===(e.target) || eomBox.value===(e.target) || eomBoxIcon.value===(e.target)){
//         textFocus.value = true
//         textareaF.value.focus()
//         blurIndex.value = textareaF.value.selectionStart
//         blurIndexEnd.value = textareaF.value.selectionEnd
//         eomShow()
//       }else {
//         textFocus.value = false
//         IconIn.value = true
//       }
//     })
// }

</script>

<style lang="less" scoped>
.loginSpanBox{
  position: relative;
}
.loginSpan{
  position: absolute;
  padding-top: 8px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.p-c{
  cursor: pointer;
}
.contentNum{
  font-size: 25px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.contentTitle{
  color: #9499A0;
  font-size: 20px;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.mar-l-r-10{
  margin: 0 10px;
}
.contentController{
  color: #9499A0;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.eom-span-show:hover{
  box-shadow: 0 0.5px 3px #76767699;
}
.show-box-m-d{
  box-shadow: 0 0 10px 3px rgba(0, 0, 0.34, .035);
}
.eom-box-all{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
}
.eom-box-all-waike{
  width: 330px;
  height: 200px;
  border-radius: 4px;
  background-color: #fff;
  z-index: 10;
  overflow: hidden;
  position: absolute;
}
.faceListBox{
  width: 34px;
  display: flex;
  margin: 5px 0 ;
  border: 1px solid #F1F2F3;
  border-radius: 4px;
  //flex-wrap: wrap;
  justify-content: center;
  //pointer-events: none;
  padding: 5px 0;
  color: #9499A0;
}
.moreHF{
  margin-bottom: 5px;
  font-size: 14px;
}
.moreHF2:hover{
  color: #2d8cf0;
  cursor: pointer;
}
.PlEnd{
  display: flex;
  justify-content: center;
  align-content: center;
}
.contentTime{
  font-size: 14px;
  line-height: 24px;
}
.aite{
  color: #2d8cf0;
}
.contentWaike{
  width: 100%;
}
.contentBodyBox{
  display: flex;
  flex-direction: column;
}
.moreContent{
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.contentBody{
  font-size: 14px;
  margin-left: 10px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 24px;
  vertical-align: baseline;
}
.userName{
  display: inline-flex;
  align-items: center;
  margin-right: 9px;
  line-height: 24px;
  vertical-align: baseline;
  white-space: nowrap;
}
/* 按钮颜色 */
.skyblue{
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
}

.COMZSVG{
  width: 18px;
  height: 18px;
  margin: 0 15px;
  fill: #9499a0;
}
.COMZSVG:hover{
  color: #00a1d6 !important;
  fill: #00a1d6 !important;
}
.comNum{
  font-size: 15px;
}
.upCom{
  margin-left: 50px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
/* 评论排序 */
.plqh{
  height: 43px;
  border-bottom: 1px solid #e7e7e7;
  padding: 20px 0;
  display: flex;
  align-content: center;
}
.plk{
  display: flex;
  padding: 10px 5px;
  justify-content: flex-start;
}
.plks{
  display: flex;
  padding: 10px 5px 0 5px;
  justify-content: flex-start;
}
.user-tx>img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.user-img>img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
/* 评论输入框 */
.plsrk{
  width: 90%;
  justify-content: flex-start;
  margin-left: 20px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  margin-top: 8px;
  background: #F1F2F3;;
}
.commentInput2{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  //margin-top: 8px;
  background: #F1F2F3;;
}
.commentInputActive{
  transition: 0.3s;
  height: 90px;
  background: white;
}
.commentInput:hover{
  background: white;
}
.plfb{
  justify-content: flex-end;
  display: inline-block;
  line-height: 55px;
  margin-left: 30px;
}
.plfb2{
  justify-content: flex-end;
  display: inline-block;
  line-height: 0px;
  margin-left: 30px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
}
/* 评论区 */
.content{
  padding: 5px;
  margin-top: 10px;
}
.contentOne{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-top: 10px;
}
.user-pl-zt{
  width: 100%;
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(206, 206, 206, 0.56);
}
.user-content-body{
  width: 100%;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}
.contentHF{
  width: 100%;
}
.contentBodyOne{
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 个性标签 */
.gxbq{
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 0;
  justify-content: flex-end;
}
.gxbq>img{
  width: 40px;
  height: 40px;
  border-radius: 50px;
}
.bh{
  font-family: "Oxanium";
  font-weight: bold;
  //font-size: 14px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  user-select: none;
}
.bh>p{
  margin: 0;
  display: inline-block;
  color: #00A1D6;
  position: relative;
  bottom: 0;
}
.user-pl-name{
  font-family: "黑体";
  //font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  display: flex;
  position: relative;
}

.jb{
  margin-left: auto;
  justify-content: end;
  display: none;
}
.comMsgBody{
  padding: 5px 0;
}
.comUpTime{
  display: flex;
  margin-top: 5px;
  align-items: center;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.mar-l-10{
  margin-left: 10px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.eom-show::-webkit-scrollbar {
  width: 8px;
  height: 6px
}
/*定义滚动条轨道*/
.eom-show::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
.eom-show::-webkit-scrollbar-thumb {
  background-color: #30B07F;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em
}
.shakeBottom {
  -webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
.active{
  color: #18191C;
  font-family: "黑体";
  font-weight: bold;
}
.None{
  display: none;
}
.backW{
  background-color: white;
}
.textInputActive{
  cursor: not-allowed;
  pointer-events: none;
}
</style>
